<section>
  <h4>Operable Tree With Search</h4>
  <div class="row">
    <div class="d-demo__search">
      <input name="search" placeholder="Search your node..." class="devui-form-control devui-input" (keyup)="onKeyUp($event)" />
      <em class="icon icon-search"></em>
    </div>
  </div>

  <div class="row">
    <div class="d-demo__search">
      <input name="search" placeholder="filter your node..." class="devui-form-control devui-input" (keyup)="onKeyUp2($event)" />
      <em class="icon icon-search"></em>
    </div>
  </div>

  <d-operable-tree
    #dOperableTreeComponent="dOperableTreeComponent"
    [tree]="data2"
    [treeNodeIdKey]="'id'"
    [treeNodeChildrenKey]="'children'"
    (nodeDeleted)="onOperableNodeDeleted($event)"
    (nodeSelected)="onOperableNodeSelected($event)"
  >
  </d-operable-tree>
</section>
